<template>
  <div class="out">
    <div class="container">
      <div class="space-left">
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>📜 我的信息</span>
          </div>
          <div class="panel-body margint">
            <img alt="" :src="userInfo.favicon ?? 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'">
            <div class="user">
              <span class="nickname">{{ userInfo.nickname }}</span>
            </div>
          </div>
        </div>
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>🏷️ 做题进度</span>
          </div>
          <div  id="ana-chart2" style="height: 353px">
            <div v-if="records.length === 0">
              <el-empty description="暂无提交记录 "></el-empty>
            </div>
          </div>
        </div>
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>🏷️ 提交分析</span>
          </div>
          <div  id="ana-chart3" style="height: 353px">
            <div v-if="records.length === 0">
              <el-empty description="暂无提交记录 "></el-empty>
            </div>
          </div>
        </div>
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>🏷️ 语言分析</span>
          </div>
          <div  id="ana-chart4" style="height: 353px">
            <div v-if="records.length === 0">
              <el-empty description="暂无提交记录 "></el-empty>
            </div>
          </div>
        </div>
      </div>
      <div class="space-right">
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>
              📈 &nbsp;&nbsp;近一个月提交次数
            </span>
          </div>
          <div class="introduction" id="ana-chart1" style="height: 500px">
            <div v-if="records.length === 0">
              <el-empty description="暂无提交记录 "></el-empty>
            </div>
          </div>
        </div>
        <div class="m-profile-panel">
          <div class="panel-heading">
            <span>
              📈 &nbsp;&nbsp;题目难度分析
            </span>
          </div>
          <div class="introduction" id="ana-chart5" style="height: 500px">
            <div v-if="records.length === 0">
              <el-empty description="暂无提交记录 "></el-empty>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {User, Iphone, Message, Aim, Monitor, ChatDotRound} from '@element-plus/icons'
import {Record} from "../utils/http/record";
import {Problem} from "../utils/http/problem";
import * as echarts from 'echarts'

export default {
  name: "AnalyzeCenter",
  components: {User, Iphone, Message, Aim, Monitor, ChatDotRound},
  data: function () {
    return {
      records:[]
    }
  },
  methods: {
    showModal() {
      this.dialogTableVisible = true
    },
    async refreshRecord(){
      let resp = await Record.getAll()
      if (resp.success){
        this.records = resp.data.records
      }else {
        this.$error("获取提交记录出错："+resp.message)
      }
    },
    getLanguageName(id){
      return Record.getLanguageName(id)
    },
    getStatusName(id){
      return Record.getStatusDetail(id)
    },
    getStatusTagType(id){
      return Record.getStatusTag(id);
    },
    async loadChart1(){
      let chart1 = echarts.init(document.getElementById("ana-chart1"))
      let now = new Date().getTime() - 1000*60*60*24*30;
      let arr = {}
      this.records.filter(v=>v.time * 1000 > now).forEach(v =>{
        let key = new Date(v.time * 1000).toLocaleDateString().substring(5);
        arr[key] = arr[key] ? arr[key]+1 : 1
      } )
      let keys = []
      let values = []
      let kvs = []
      for (let key in arr){
        kvs.push({t:key,v:arr[key]})
      }

      kvs.sort((a,b)=>a.t > b.t ? 1 : -1)

      // keys = kvs.map(kv=>new Date(parseInt(kv.t)).toLocaleDateString().substring(5))
      keys = kvs.map(kv=>kv.t)
      values = kvs.map(kv=>kv.v)
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data: ['提交次数']
        },
        xAxis: {
          data: keys
        },
        yAxis: {},
        series: [
          {
            name: '提交次数',
            type: 'bar',
            data: values
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      chart1.setOption(option);
    },
    async loadChart2(){
      let chart = echarts.init(document.getElementById("ana-chart2"));
      let set = {}
      this.records.filter(r=>r.status === 1).forEach(r=>{
        if (!set[r.pid]){
          set[r.pid] = r
        }
      })
      let size = Object.getOwnPropertyNames(set).length
      let all = (await Problem.getAll()).data.problems.length

      chart.setOption({
        legend:{},
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} 道题"
        },
        series : [
          {
            name: '做题进度',
            type: 'pie',    // 设置图表类型为饼图
            radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data:[          // 数据数组，name 为数据项名称，value 为数据项值
              {value:size, name:`已完成`},
              {value:all-size, name:`未完成`},
            ],
            roseType: 'angle',
          }
        ]
      })
    },
    async loadChart3(){
      let chart = echarts.init(document.getElementById("ana-chart3"));
      let set = {}
      this.records.forEach(r=> set[r.status]=set[r.status] ? set[r.status]+1 : 1)

      let data = []
      for (let code in set){
        data.push(
          {
            value:set[code],
            name:Record.getStatusDetail(code),
            itemStyle:{
              color:Record.getStatusColor(code)
            }
          }
        )
      }
      chart.setOption({
        legend:{},
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} 次提交"
        },
        series : [
          {
            name:"提交分析",
            type: 'pie',    // 设置图表类型为饼图
            radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data:data,
          }
        ]
      })
    },
    async loadChart4(){
      let chart = echarts.init(document.getElementById("ana-chart4"));
      let set = {}
      this.records.forEach(r=> set[r.language]=set[r.language] ? set[r.language]+1 : 1)
      let data = []
      for (let code in set){
        data.push(
          {
            value:set[code],
            name:Problem.getLanguageNameByCode(code),
          }
        )
      }

      chart.setOption({
        legend:{},
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b}语言 : {c} 次提交"
        },
        series : [
          {
            name:"语言分析",
            type: 'pie',    // 设置图表类型为饼图
            radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data:data,
          }
        ]
      })
    },
    async loadChart5(){
      let chart1 = echarts.init(document.getElementById("ana-chart5"))
      let resp = await Record.getSuccessStatistic()
      let kvs = []
      for (let key in resp.data){
        kvs.push({t:key,v:resp.data[key]})
      }

      kvs.sort((a,b)=>a.t > b.t ? 1 : -1)

      // keys = kvs.map(kv=>new Date(parseInt(kv.t)).toLocaleDateString().substring(5))
      let keys = kvs.map(kv=>kv.t)
      let values = kvs.map(kv=>kv.v)
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        legend: {
          data: ['难度']
        },
        xAxis: {
          data: keys
        },
        yAxis: {},
        series: [
          {
            name: '通过题目数量',
            type: 'bar',
            data: values
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      chart1.setOption(option);
    }
  },
  created() {
    if (!this.$store.state.isLogin) {
      this.$goRoute('/login')
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.state.isLogin;　　//需要监听的数据
    },
    userInfo() {
      return this.$store.state.userInfo??{};
    }
  },
  watch: {
    isLoggedIn(newVal, oldVal) {
      if (!newVal) {
        this.$goRoute('/login')
      }
    }
  },
  async mounted() {
    await this.refreshRecord()
    if (this.records.length === 0){
      return
    }
    this.loadChart1()
    this.loadChart2()
    this.loadChart3()
    this.loadChart4()
    this.loadChart5()
  }
}
</script>

<style scoped>
.out {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f8fa;
}

.introduction {
  text-align: left;
  margin: 30px;
}

.container {
  margin: 30px auto;
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.space-left {
  width: 355px;
}

.space-right {
  width: 805px;
}

.profile-body {
  display: flex;
  flex-direction: column;
  padding-left: 40px;
  padding-bottom: 20px;
  align-items: flex-start;
}

.profile-content {
  font-size: 16px;
  display: flex;
  align-items: center;
  max-width: 90%;
}

.profile-content > i {
  font-size: 16px;
  margin-right: 10px;
  color: #1890ff;
}

.profile-title {
  font-size: 19px;
  font-weight: bold;
  margin: 15px 0;
}

.summitions {
  display: flex;
  flex-direction: column;
}

.submit-title {
  text-align: center;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
}

.submit-line {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-bottom: 1px;
  width: 100%;
  padding: 13px 16px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
}

.submit-content {
  text-align: center;
  width: 100%;
  height: 25px;
}

.nickname {
  font-size: 20px;
}

.username {
  font-size: 12px;
  font-weight: lighter;
}

.m-profile-panel {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 2.0rem;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
  background: white;
}

.m-profile-panel > .panel-heading {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  background-color: #F5F5F5;
}

.m-profile-panel > .panel-heading > span {
  font-size: 1.0rem;
}

.m-profile-panel > .panel-heading > a {
  text-decoration: none;
}

.m-profile-panel > .panel-heading > a:hover {
  background-color: #DDD;
  color: #000;
}

.m-profile-panel > .panel-body {
  display: flex;
  padding-bottom: 20px;
}

.m-profile-panel > .panel-body > .user {
  display: flex;
  flex-direction: column;
}

.m-profile-panel > .panel-body > .user > .ranking > img {
  margin-right: 0.3rem;
  width: 18px;
  height: 18px;
}

.m-profile-panel > .panel-body > .user > .social > img {
  width: 32px;
  height: 32px;
}

.m-profile-panel > .panel-body > img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin: 0 1.2rem;
}

.m-profile-panel > .panel-body > ul {
  width: 100%;
  padding-inline-start: 0px;
  margin-block-end: 0px;
}

.m-profile-panel > .panel-body > ul > svg {
  margin-top: 2.0rem;
}

.m-profile-panel > .panel-body > ul > li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}

.m-profile-panel > .panel-body > ul > li > span:last-child {
  background-color: #5cb85c;
  color: #FFF;
  font-size: 0.8rem;
  font-weight: bold;
  min-width: 10px;
  padding: 0px 5px;
  border-radius: 10px;
}

.m-profile-panel > .panel-body > ul > li > span > img {
  width: 18px;
  height: 18px;
  margin-top: -0.2rem;
  margin-right: 0.3rem;
}

.margint {
  margin-top: 1.0rem;
}

.rank {
  margin-top: 20px;
  color: #777;
}

.space-record-container{
  box-sizing: border-box;
  overflow-y: auto;
  font-size: 16px ;
  font-weight: normal;
}
.space-ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}
.space-ques-row{
  padding: 10px 0;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}
</style>
